<template>
  <div>
    <el-button type="primary" icon="el-icon-plus" @click="showDialogAction(null)" style="margin: 10px 0">新增</el-button>

    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="menuId"
      border
      default-expand-all
      :tree-props="{children:  'children' , hasChildren: 'hasChildren'}">
      <el-table-column prop="title" label="菜单名称" width="180"></el-table-column>

      <el-table-column prop="menuType" label="类型">
        <template slot-scope="scope">
          <el-tag :type="menuTypeFormat(scope.row.menuType).color">{{menuTypeFormat(scope.row.menuType).label}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" width="180"></el-table-column>
      <el-table-column prop="permission" label="权限标识" width="180"></el-table-column>
      <el-table-column prop="path" label="菜单路径" width="250"></el-table-column>
      <el-table-column prop="sort" label="排序" width="180"></el-table-column>
<!--      <el-table-column prop="ifShow" label="" width="180"></el-table-column>-->
      <el-table-column prop="menuType" align="center" label="是否展示"  width="100">
        <template slot-scope="scope">
          <el-tag :type="menuIsShowFormat(scope.row.isStatus).color">{{menuIsShowFormat(scope.row.isStatus).label}}</el-tag>
        </template>
      </el-table-column>


      <el-table-column prop="prop" label="操作" align="center" fixed="right" width="120">
        <template slot-scope="{row,$index}">
          <el-button @click="showDialogAction(row)"  type="primary" icon="el-icon-edit" circle></el-button>
<!--          <el-button  @click="delAction(row)" type="danger"  icon="el-icon-delete" circle></el-button>-->
        </template>
      </el-table-column>

    </el-table>


    <el-dialog style="width: 80%" :title="title+'菜单信息'" :before-close="handleClose" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="ruleForm" :rules="rules">

        <el-form-item label="上级菜单" :label-width="formLabelWidth">
          <el-input v-model="form.parentId" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="菜单名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单类型" :label-width="formLabelWidth">
          <el-radio-group v-model="form.menuType">
            <el-radio-button :label="1">路由</el-radio-button>
            <el-radio-button :label="2">菜单</el-radio-button>
            <el-radio-button :label="3">按钮</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="路由" :label-width="formLabelWidth">
          <el-input v-model="form.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="路由名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="组件路径" :label-width="formLabelWidth">
          <el-input v-model="form.component" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" :label-width="formLabelWidth">
          <el-input v-model="form.permission" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input-number v-model="form.sort" autocomplete="off" @change="handleChange" :min="1" :max="500"
                           label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="是否显示" :label-width="formLabelWidth">
          <el-radio-group v-model="form.isStatus">
            <el-radio :label="0">显示</el-radio>
            <el-radio :label="1">不显示</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="图标" :label-width="formLabelWidth">
          <el-input v-model="form.icon" autocomplete="off"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAction('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="addAction">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import * as api from './api'
  import { SYSTEM_STATUS } from '@/utils/enum-data'

  export default {
    name: "index",
    data() {
      return {
        title: "新增",
        pageDto: {
          pageNum: 1,
          pageSize: 10,
        },
        pageDto2: {
          menuTypes: [2]
        },
        dialogFormVisible: false,
        //菜单列表数据
        tableData: [],
        //新增菜单选择树
        tableData2: [],

        rules: {},

        formLabelWidth: '120px',
        form: {
          menuId: null,
          parentId: 0,
          parentTitle: "",
          title: "",
          name: "",
          permission: "",
          sort: 50,
          ifShow: 1,
          path: "",
          component: "",
          icon: "",
          menuType: 2,
        },

        defaultProps: {
          children: 'children',
          label: 'title'
        }
      }
    },
    // 组件加载完毕发出请求
    mounted() {
      this.pageAction();
    },
    methods: {

      resetForm() {
        this.form = {
          menuId: null,
          parentId: 0,
          title: "",
          name: "",
          permission: "",
          sort: 50,
          ifShow: 1,
          path: "",
          component: "",
          icon: "",
          menuType: 2,
        }
      },
      async pageAction() {
        //列表树菜单
        let result = await api.listWithTree(this.pageDto);
        this.tableData = result.data;
        //新增菜单选择上级菜单
        let result2 = await api.addMenusListWithTree(this.pageDto2);
        this.tableData2 = result2.data;
      },
      showDialogAction(row) {
        this.dialogFormVisible = true
        this.form = {...row}
      },
      //取消新增/编辑弹窗页面
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            // this.$refs['ruleForm'].resetFields();
            // this.resetForm()
            done();
          })
          .catch(_ => {
          });
      },
      menuTypeFormat(val) {
        let itemTemp = {}
        this.$GlobalStatus.SYSTEM_MENU_TYPE.forEach(item => {
          if (item.type === val) {
            itemTemp = item
          }
        })
        return itemTemp
      },
      menuIsShowFormat(val) {
        let itemTemp = {}
        this.$GlobalStatus.SYSTEM_STATUS.forEach(item => {
          if (item.type === val) {
            itemTemp = item
          }
        })
        return itemTemp
      },




      // 取消新增编辑弹窗
      cancelAction() {
        this.$refs.ruleForm.resetFields();
        this.dialogFormVisible = false
        this.resetForm()
      },
      //新增编辑
      addAction() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            //请求接口
            api.addRequest(this.form).then(res => {
              if (200 === res.code) {
                //关闭弹窗
                this.dialogFormVisible = false
                //弹出提示
                this.$message({
                  // message: res.msg,
                  message: this.form.id === null ? '新增成功' : '编辑成功',
                  type: 'success'
                });
                //刷新页面
                this.pageAction();
                //清空form表单
                this.resetForm()
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },


      handleChange(value) {
        console.log(value);
      },


      delAction(row) {
        api.delRequest(row.menuId).then(res => {
          if (200 === res.code) {
            //弹出提示
            this.$message({
              message: res.msg,
              type: 'success'
            });
            //刷新页面
            this.pageAction();
          }
        })
        // this.$confirm('确认删除？')
        //   .then(_ => {
        //
        //   })
        //   .catch(_ => {
        //   });

      },
      handleNodeClick(data) {
        this.form.parentId = data.menuId
        this.form.parentTitle = data.title
        this.$refs.parentId.blur()  //选中后隐藏下拉框
      }
    },


  }
</script>

<style scoped>

</style>
